<template>
	<view class="classify-bar">
		<!-- 搜索栏 -->
		<view class="search-bar uni-bg-color"><search-bar ></search-bar></view>
		<!-- 分类列表 -->
		<view class="classify-list-bar uni-bg-color">
			<scroll-view scroll-y class="classify-tabs uni-bg-color-grey">
				<view class="tabs-item uni-font-size-base" :class="{active: index == tabIndex}" v-for="(item, index) in dataList" :key="index" @click="switcCategory(index)">{{item.name}}</view>
			</scroll-view>
			<scroll-view class="classify-conter">
				<view class="classify-conter-list">
					<navigator v-for="(item, index) in dataList[tabIndex].children" :key="index" hover-class="none" url="../../../pagesGoods/goods/goods" class="classify-conter-list-item">
						<goods-item-bar :imgW='120' :imgH='120' :imgBorder='false' :imgSrc="path + item.img" :title="item.name" titleDirection='center'></goods-item-bar>
					</navigator>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			// 切换分类
			switcCategory(index) {
				this.tabIndex = index
			},
			// 列表
			getList() {
				this.$Request(this.$API.getCategoryList).then(res => {
					this.dataList = res.rows
				})
			}
		},
		data() {
			return {
				dataList: [],
				tabIndex: 0,
				children: [],
				path: ''
			};
		},
		mounted() {
			this.path = this.$Path
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.classify-bar{
		width: 100%;
		position: absolute;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.search-bar{
		width: 100%;
		padding: 10upx 20upx;
		box-sizing: border-box;
	}
	.classify-list-bar{
		width: 100%;
		height: 100%;
		flex: 1;
		display: flex;
		border-top: solid 2upx #f6f6f6;
		box-sizing: border-box;
		overflow: hidden;
		.classify-tabs{
			width: 200upx;
			height: 100%;
			.tabs-item{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active{
					background: #fff;
					color: #1296db;
				}
			}
		}
		.classify-conter{
			flex: 1;
			width: 100%;
			height: 100%;
			.classify-conter-list{
				width: 100%;
				padding: 30upx 0;
				display: flex;
				flex-wrap: wrap;
				.classify-conter-list-item{
					width: 33.33%;
					margin-bottom: 10upx;
				}
			}
		}
	}
</style>
